<template>
  <div class="sjqst-content" :style="{ height: isHidden ? 'auto' : '275px' }">
    <div class="tab-select-new">
      <p class="event-name">事件趋势图</p>
      <div class="event-btn">
        <div v-if="!isHidden">
          <span
            class="btn noradius"
            style="width: 70px"
            :class="{ active: currentTime == 1 }"
            @click="selectTime(1)"
            >近24小时</span
          >
          <span
            class="btn noradiusall"
            style="width: 70px"
            :class="{ active: currentTime == 7 }"
            @click="selectTime(7)"
            >近7天</span
          >
          <span
            class="btn noradiusallSq"
            style="width: 70px"
            :class="{ active: currentTime == 30 }"
            @click="selectTime(30)"
            >近30天</span
          >
        </div>

        <div class="shouq" @click="toggleShow">
          {{ isHidden ? "展开" : "收起" }}

          <CaretBottom
            style="width: 1em; height: 1em; margin-right: 8px"
            v-if="isHidden"
          />
          <CaretTop
            style="width: 1em; height: 1em; margin-right: 8px"
            v-if="!isHidden"
          />
        </div>
      </div>
    </div>
    <div class="table-box" style="height: calc(100% - 40px)" v-show="!isHidden">
      <echartsCom :options="pieData"></echartsCom>
    </div>
  </div>
</template>

<script setup>
import { onMounted, defineProps } from "vue";
import echartsCom from "@/components/echarts.vue";
import * as echarts from "echarts";
import { MinxfunCoulmns } from "./device.js";
const { findSenceType } = MinxfunCoulmns();
import { getSceneEventsTrend } from "@/api/zlcj.js";
let pieData = ref([]);
const route = useRoute();
let currentTime = ref(7);

const selectTime = (time) => {
  currentTime.value = time;
  getData();
};

let isHidden = ref(false);
const toggleShow = () => {
  isHidden.value = !isHidden.value;
};

const getData = async () => {
  try {
    let obj = {
      sceneCode: await findSenceType(route.params.id),
      dimension: currentTime.value,
    };

    let res = await getSceneEventsTrend(obj);
    let data = res.data.eventTrendList;
    let xAxis = [];
    let ys = [];
    data.forEach((element) => {
      xAxis.push(element.xaxis);
      ys.push(element.eventAmount);
    });
    pieData.value = {
      legend: {
        show: false,
        textStyle: {
          color: "#6F87B1",
          fontSize: 16,
        },
        right: 10,
        top: 0,
        itemWidth: 18,
        itemHeight: 12,
        itemGap: 40,
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "#2263BF",
        formatter: (p) => {
          let dom = `<div style="color:#fff">
        ${p[0].data}条
        </div>`;
          return dom;
        },
      },
      grid: {
        top: "6%",
        left: "1%",
        right: "0%",
        bottom: "5%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: xAxis,

        axisLabel: {
          color: "#999999",
          fontSize: 12,
        },
        axisLine: {
          lineStyle: {
            color: "#979797",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#333333",
          fontSize: 12,
          fontWeight: "bold",
        },
        axisLabel: {
          color: "#999999",
          fontSize: 12,
          interval: 0, // 确保显示所有标签
          rotate: 40, // 如果标签太多，可以旋转显示
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#979797",
            opacity: 0.21,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#979797"],
            opacity: 0.21,
            width: 1,
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "",
          type: "line",
          z: 1,
          type: "line",
          symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          itemStyle: {
            color: "#2D9BFC",
          },
          lineStyle: {
            color: "#2D9BFC",
          },
          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(25,163,223,.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(25,163,223, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
          data: ys,
        },
      ],
    };
  } catch (e) {
    console.log("error:", e);
  }
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.sjqst-content {
  padding: 14px 20px;
  width: 450px;
  //   height: 275px;
  height: 30%;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.3);
  border-radius: 12px;
  margin-top: 10px;
  .tab-select-new {
    display: flex;
    justify-content: space-between;
    .event-btn {
      display: flex;
      align-items: center;
      .shouq {
        cursor: pointer;
        margin-left: 10px;
        font-weight: 500;
        font-size: 14px;
        color: #2263bf;
        line-height: 20px;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
      }
      .btn {
        color: #2263bf;
        font-size: 12px;
        background: rgba(142, 191, 255, 0.22);
        border: 1px solid rgba(44, 132, 255, 0.22);
        &.active {
          background: #2263bf;
          color: #fff;
        }
      }
    }
  }
  .event-name {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
  }
  .table-box {
    width: 100%;
    // height: 240px;
    // height: calc(100% - 40px);
    // height: 100%;
  }
}
</style>
